<template>
<form class="form-horizontal" role="form" @submit.prevent="submitRole" autocomplete="off">
  <div class="modal fade" :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="'modal-'+ modalId +'-lable'" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" :id="'modal-'+ modalId +'-lable'">{{editRole.roleId ? "编辑":"新增"}}角色</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group" v-show="!initRole.platform && initRole.platform != 0">
            <label class="control-label">平台类型：</label>
            <div style="display:inline-block">
              <select class="selectpicker" title="-平台类型-" data-actions-box="true" @change="setPlatform">
                <option v-for="(plat, index) in platforms" :key="index" :value="index">{{plat.text}}</option>
              </select>
              <p class="invalid-feeback" v-if="$v.editRole.platform.$error && !$v.editRole.platform.required">请选择平台类型.</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">角色名称：</label>
            <div style="display:inline-block">
              <input type="text" v-model.trim="editRole.name" class="form-control">
              <p class="invalid-feeback" v-if="$v.editRole.name.$error && !$v.editRole.name.required">角色名称不能为空.</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">角色编号：</label>
            <div style="display:inline-block">
              <input type="text" v-model.trim="editRole.code" class="form-control">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取 消</button>
          <button type="submit" class="btn btn-primary">提 交</button>
        </div>
      </div>
    </div>
  </div>
</form>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'

  import { required } from 'vuelidate/lib/validators'
  import { platforms } from '../dist/js/enum'

  const modalId = 'modal-edit-role-' + new Date().getTime()
  const initRole = {}
  const editRole = {}

  var $platform = null;

  function modal(isShow) {
    $(() => {
      $('#' + this.modalId).modal(isShow ? 'show' : 'hide')
    })
  }
  function open() {
    this.modal(true)
  }
  function hide() {
    this.modal(false)
  }
  function response(role) {
    this.$emit('role', role)
    this.modal(false)
  }

  function setRole(role) {
    this.initRole = Object.assign({}, role)
    this.editRole = Object.assign({}, role)
    if ($platform && role.platform) {
      $platform.selectpicker('val', role.platform)
    } else if ($platform) {
      $platform.selectpicker('val', '')
    }
  }
  function setPlatform(event) {
    $platform = $(event.target)
    this.$set(this.editRole, 'platform', $platform.val())
  }
  function submitRole(event) {
    this.$v.$touch()
    if (this.$v.$invalid) return
    const $target = $(event.target)
    if (!$target.lock()) return
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/role/' + (this.editRole.roleId ? 'edit' : 'add') + '/' + this.editRole.platform + '/!/' + this.platType + '-' + (this.editRole.roleId ? 'edit' : 'add') + '-role',
      type: this.editRole.roleId ? 'patch' : 'put',
      data: JSON.stringify(this.editRole),
      success: result => {
        if (result.status != 0) {
          $target.failMsg(result.message)
          return;
        }
        $target.unlock()
        if (this.initRole.roleId) {
          this.response(this.editRole)
          return
        }
        // 获取新角色的完整信息
        $.get(cfg.serverPath + "/role/page/" + this.editRole.platform + '/!/' + this.platType + '-' + (this.editRole.roleId ? 'edit' : 'add') + '-role',
          {
            roleId: result.data
          },
          result => {
            if (result.status != 0) {
              $target.failMsg(result.message)
              return
            }
            this.response(result.data.list[0])
          })
      },
      error: () => {
        $target.unlock()
      }
    });
  }
  export default {
    props: {
      platType: String
    },
    data() {
      return {
        modalId,
        platforms,
        editRole,
        initRole
      }
    },
    methods: {
      open,
      hide,
      response,
      modal,
      setRole,
      setPlatform,
      submitRole
    },
    created() {
      $(function() {
        $(".selectpicker").selectpicker();
      });
    },
    validations: {
      editRole: {
        platform: {
          required
        },
        name: {
          required
        },
        code: {
        }
      }
    }
  }
</script>